<template>
  <div>
    <el-container class="ct">
      <el-aside width="auto" class="my-aside" ref="aside" v-show="asideShow || !isCollapse">
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo mb"
                 :collapse="isCollapse" background-color="#545C64"
                 text-color="#ffffff">
          <el-menu-item index="0" >
            <i class="el-icon-set-up"></i>
            <span slot="title">旅人W</span>
          </el-menu-item>
          <el-menu-item v-for="(menu,index) in menus" @click="$router.push(menu.url)" :index="(index+1).toString()">
            <i :class="menu.ico"></i>
            <span slot="title">{{menu.name}}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header">
          <i class="switch el-icon-s-fold fl" @click="menuAuto" v-show="!this.isCollapse"></i>
          <i class="switch el-icon-s-unfold fl" @click="menuAuto" v-show="this.isCollapse"></i>
          <div class="user">
            <el-avatar :src="$store.state.user.avatar"></el-avatar>
            <el-dropdown :hide-on-click="false">
							<span class="el-dropdown-link">
								{{$store.state.user.username}}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="toMyIndex">个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <transition name="router-fade" mode="out-in">
            <router-view v-if="!$route.meta.keepAlive"/>
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="less">
  body {
    margin: 0 0;

    .ct {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }

  header {
    background-color: #F6F6F6;
    height: 55px !important;
    line-height: 55px;
    border-bottom: 1px solid #CCCCCC;
    .user {
      float: right;
      .el-avatar{
        margin-top: 8px;
      }
      .el-dropdown{
        margin-top: 5px;
        float: right;
        margin-left: 5px;
      }
    }
  }

  .switch {
    color: #545C64;
    font-size: 25px;
    cursor: pointer;
    &:hover {
      color: darkgrey;
    }
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    border-right: none;
  }

  .mb {
    border-right: none !important;
  }

  .my-aside {
    background-color: #545C64;
    border-right: 1px solid #e6e6e6;
    //清除滚动条
    &::-webkit-scrollbar {
      display: none;
    }
  }

  //添加路由切换过度动画，淡入淡出
  .router-fade-enter-active {
    transition: all .3s cubic-bezier(0.6, 0.5, 0.3, 0.1);
  }

  .router-fade-leave-active {
    transition: all .3s cubic-bezier(0.5, 0.5, 0.5, 0.5);
  }

  .router-fade-enter {
    transform: translateX(-10px);
    opacity: 0;
  }

  .router-fade-leave-to {
    transform: translateX(50px);
    opacity: 0;
  }
</style>

<script>
  import {getMenus} from "@/api/login";
  import role from '@/api/role'
  import components from "./index";

  export default {
    data() {
      return {
        isCollapse: false,
        asideShow: true,
        logoWidth:0,
        menus:[{
          name:'',
          url:'',
          ico:'',
          component:''
        }]
      };
    },
    mounted() {
      this.menuAutoWidth()
      this.getMenus()
      role.getRole()
    },
    methods: {
      menuAuto() {
        this.isCollapse = !this.isCollapse
      },
      menuAutoWidth() {
        const that = this;
        window.onresize = function temp() {
          that.isCollapse = window.innerWidth < 1200
          that.asideShow = window.innerWidth > 800
        }
      },
			logout(){
      	this.$Msg.MessageBox.confirm("您确定要注销当前登录，退出系统？", '提示',{
					confirmButtonText: '残忍退出',
					cancelButtonText: '我再想想',
					type: 'warning'
				}).then(() => {
          sessionStorage.clear()
					location.reload()
				}).catch(() => {
					this.$Msg.Message.warning("好的呢")
				})
			},
			toMyIndex(){
      	this.$router.push("my-index")
			},
      getMenus(){
        const menu = sessionStorage.getItem('menu')
        if(this.$isEmpty(menu)){
          console.log('没有菜单，从后端获取')
          getMenus().then(rsp=>{
            if (this.$isEmpty(rsp.data) || rsp.data.length === 0){
              this.$Msg.Message.warning("您没有任何页面权限，请联系管理员分配")
            }else{
              sessionStorage.setItem("menu", JSON.stringify(rsp.data))
              //this.$store.commit("setMenuRouter", rsp.data)
              this.menus = rsp.data
              this.addMenuRouter(this.menus)
            }
          }).catch(err=> {
            this.$Msg.Message.error(err.response.data)
          })
        }else {
          console.log('找到菜单，直接取出')
          this.menus = JSON.parse(menu)
          this.addMenuRouter(this.menus)
        }
      },
      addMenuRouter(menu){
        //如果路由已经添加则跳过
        if (this.$router.options.routes[2].children.length < 2){
          menu.forEach(m=>{
            //组件未定义则跳过
            if (!this.$isEmpty(components.get(m.component))){
              //添加路由
              this.$router.options.routes[2].children.push({
                path:m.url,
                name:m.name,
                component: components.get(m.component)
              })
            }
          })
          //将路由注册生效
          this.$router.addRoutes(this.$router.options.routes)
        }
        console.log(this.$router)
      },
    }
  }
</script>
